<template>
  <div class="edit container">
      <Alert v-if="alert" :msg="alert"></Alert>
     <h4 class="page-header">编辑用户</h4>
     <form action="" v-on:submit="updateAddInfo">
         <div class="well">
             <h5>用户信息</h5>
             <div class="form-group">
                 <label>姓名</label>
                 <input type="text" class="form-control" placeholder="name" v-model="customer.name">
             </div>
             <div class="form-group">
                 <label>电话</label>
                 <input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
             </div>
             <div class="form-group">
                 <label>邮箱</label>
                 <input type="text" class="form-control" placeholder="email" v-model="customer.email">
             </div>
             <div class="form-group">
                 <label>学历</label>
                 <input type="text" class="form-control" placeholder="education" v-model="customer.education">
             </div>
             <div class="form-group">
                 <label>毕业学校</label>
                 <input type="text" class="form-control" placeholder="graduationSchool" v-model="customer.graduationSchool">
             </div>
             <div class="form-group">
                 <label>职业</label>
                 <input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
             </div>
             <div class="form-group">
                 <label>个人简介</label>
                 <textarea rows="10" class="form-control" v-model="customer.profile" placeholder="profile"></textarea>
             </div>
             <button type="submit" class="btn btn-primary">确认</button>
         </div>
     </form>
  </div>
</template>

<script>
import Alert from "./Alert"
export default {
    name: "edit",
    data() {
        return {
            customer:{},
            alert:""
        };
    },
    created() {
        this.fetchInfo(this.$route.params.id);
    },
    methods: {
        fetchInfo(id){
            this.$http.get("http://localhost:3010/users/"+id).then(function(response){
                if(response.ok == true){
                    this.customer = response.body;
                }
            })
        },
        updateAddInfo(e){
             if(!this.customer.name){
                this.alert = "亲输入您的姓名！"
                }else if(!this.customer.phone){
                this.alert = "请输入您的手机号！"
                }else if(!this.customer.email){
                this.alert = "请输入电子邮件地址！"
                }else{
                let updateCustomer ={
                    name:this.customer.name,
                    phone:this.customer.phone,
                    email:this.customer.email,
                    education:this.customer.education,
                    graduationSchool:this.customer.graduationSchool,
                    profession:this.customer.profession,
                    profile:this.customer.profile
                }
                this.$http.put("http://localhost:3010/users/"+this.$route.params.id,updateCustomer).then(function(response){
                    if(response.ok == true){
                        this.$router.push({
                            path:"/",query:{alert:"用户信息修改成功！"}
                        })
                    }else{

                    }
                })
                e.preventDefault();
            }
            e.preventDefault();
        }
    },
    components:{
        Alert
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
